<template>
  <div ref="main" class="box"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { chartDataOne } from "../../axios/http";
const week = ref<Array<string>>([]);
const nums = ref<Array<number>>([]);
const main = ref();
const data = ref([
  {
    title: "",
    num: 0,
  },
]);
onMounted(async () => {
  // 请求数据
  const arr = await chartDataOne();
  console.log(arr.data);
  data.value = arr.data;
  // 处理数据
  shuj(data.value);
  // 图表
  init();
});
// 处理数据
const shuj = (data: any) => {
  data.forEach((itm: any) => {
    week.value.push(itm.title);
    nums.value.push(itm.num);
  });
};
function init() {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(main.value);
  // 指定图表的配置项和数据
  let option = {
    title: {
      text: "小区人口统计",
    },
    xAxis: {
      type: "category",
      data: week.value,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: nums.value,
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
        itemStyle: {
          normal: {
            label: {
              show: true, //开启显示
              position: "top", //在上方显示
              textStyle: {
                //数值样式
                color: "black",
                fontSize: 16,
              },
            },
          },
        },
      },
    ],
  };
  myChart.setOption(option);
}
</script>
<style scoped>
.box {
  background-color: #fff;
}
</style>
